﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            padding: 20px
        }
    </style>
    <link rel="stylesheet" href="index.css">

    <script src="/htmx.js"></script>
    <script type="text/javascript">

    </script>
</head>

<body>
    <button hx-get="/api/index.aardio" 
        hx-swap="innerHTML" 
        hx-trigger="click" 
        hx-target="#info-div"  
        hx-vals='javascript:{myVal: "\
        有以下几种方法指定请求参数：\
        1、在这里直接指定 JSON 作为请求参数。\
        2、使用 javascript: 返回一个 JS 对象作为请求参数。\
        3、如果当前节点是 input，则 name 指定参数名。\
        4、如果当前节点是 form ，则表单内部所有控件的数据作为请求参数。"}'  
        hx-indicator="#indicator">
        点这里发送 GET 请求
    </button><br>

    <!-- 
        上面的 hx-indicator="#indicator" 用 CSS 选择器指定了提交时显示的节点，
        由 index.css 中的 .htmx-request.htmx-indicator 样式指定了提交时切换为显示样式。
        注意 aardio 后端是多线程的，执行耗时操作不会阻塞网页前端。
    -->
    <img id="indicator" class="htmx-indicator" src="/images/loading.gif"/>

    <div id="info-div">
        使用 htmx 每个 HTML 节点都可以发送 HTTP 请求，<br>
        每个 HTML 节点都可以单独刷新显示服务端返回的 HTML。<br>
        <br> 
        不要为了不写 JavaScript 而不写 JavaScript：<br>  
        <button onclick="aardio.getFile().then( 
            v=> { if(v) document.getElementById('info-div').innerText = v; }
            )">
            JavaScript 直接调用 aardio 函数打开本地文件</button>
    </div><br>

    <input type="text" 
        name="q" 
        hx-post="/api/index.aardio" 
        hx-trigger="keyup changed delay:500ms"
        hx-target="#search-results" 
        placeholder="请输入关键词发送 POST 请求 ..."
        style="width:300px"><br>
    <div id="search-results"></div>
    <br>
    <a href="https://mp.weixin.qq.com/s/UTiu5gXJ7j-hKnewhhF5sA" target="_blank">htmx.js 快速入门</a>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed;left:0px;top:0px;z-index: -1;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        
        gPaint.defaultUIStyle = "dark";
        addDefaultEvent(canvas, gPaint);

        let latestDataStr = "";
        
        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            if(view.viewType == "latestdiv"){
                drawLatestDiv(view, paint, clipRect);
            }else{
                onPaintDefault(view, paint, clipRect);
            }
        };

        /*
        * 绘制最新数据
        */
        let drawLatestDiv = function (view, paint, clipRect) {
            let avgHeight = 20;
            let drawFont = "Default,14";
            if (gPaint.isMobile) {
                drawFont = "Default,12";
            }
            let dTop = 30;
            paint.drawLine(view.borderColor, 1, [], 0, dTop, view.size.cx, dTop);
            var dataStrs = latestDataStr.split(",");
            let lastClose = 0;
            let priceList = new Array();
            let volList = new Array();
            let buySellTexts = new Array();
            if (dataStrs.length > 10) {
                paint.drawText(dataStrs[0], "rgb(175,196,228)", "Default,14", 5, 7);
                paint.drawText(dataStrs[1], "rgb(194,151,18)", "Default,14", 80, 7);
                lastClose = parseFloat(dataStrs[8]);
                priceList.push(parseFloat(dataStrs[23]));
                priceList.push(parseFloat(dataStrs[22]));
                priceList.push(parseFloat(dataStrs[21]));
                priceList.push(parseFloat(dataStrs[20]));
                priceList.push(parseFloat(dataStrs[19]));
                priceList.push(parseFloat(dataStrs[9]));
                priceList.push(parseFloat(dataStrs[10]));
                priceList.push(parseFloat(dataStrs[11]));
                priceList.push(parseFloat(dataStrs[12]));
                priceList.push(parseFloat(dataStrs[13]));

                volList.push(parseFloat(dataStrs[28]));
                volList.push(parseFloat(dataStrs[27]));
                volList.push(parseFloat(dataStrs[26]));
                volList.push(parseFloat(dataStrs[25]));
                volList.push(parseFloat(dataStrs[24]));
                volList.push(parseFloat(dataStrs[14]));
                volList.push(parseFloat(dataStrs[15]));
                volList.push(parseFloat(dataStrs[16]));
                volList.push(parseFloat(dataStrs[17]));
                volList.push(parseFloat(dataStrs[18]));
            }
            buySellTexts.push("卖5");
            buySellTexts.push("卖4");
            buySellTexts.push("卖3");
            buySellTexts.push("卖2");
            buySellTexts.push("卖1");
            buySellTexts.push("买1");
            buySellTexts.push("买2");
            buySellTexts.push("买3");
            buySellTexts.push("买4");
            buySellTexts.push("买5");
            let textColor = "rgb(175,196,228)";
            if (view.paint.defaultUIStyle == "light") {
                textColor = "rgb(0,0,0)";
            }
            let maxVol = maxValue(volList);
            for (let i = 0; i < 10; i++) {
                let tSize = paint.textSize(buySellTexts[i], drawFont);
                paint.drawText(buySellTexts[i], textColor, drawFont, 5, dTop + avgHeight / 2 - tSize.cy / 2);
                if (priceList.length > 0) {
                    let price = priceList[i];
                    let upDownColor = "rgb(255,82,82)";
                    let upDownColor2 = "rgba(255,82,82,50)";
                    if (price < lastClose) {
                        upDownColor = "rgb(46,255,50)";
                        upDownColor2 = "rgba(46,255,50,50)";
                    } 
                    if (gPaint.isMobile) {
                        paint.drawText(priceList[i].toFixed(2), upDownColor, drawFont, 40, dTop + avgHeight / 2 - tSize.cy / 2);
                    } else {
                        paint.drawText(priceList[i].toFixed(2), upDownColor, drawFont, 50, dTop + avgHeight / 2 - tSize.cy / 2);
                    }
                    if (maxVol > 0) {
                        if (gPaint.isMobile) {
                            paint.fillRect(upDownColor2, view.size.cx - volList[i] * 50 / maxVol, dTop + 2, view.size.cx, dTop + avgHeight - 2);
                        } else {
                            paint.fillRect(upDownColor2, view.size.cx - volList[i] * 80 / maxVol, dTop + 2, view.size.cx, dTop + avgHeight - 2);
                        }
                    }
                    let volText = (volList[i] / 100).toFixed(0);
                    let volTextSize = paint.textSize(volText, drawFont);
                    paint.drawText(volText, textColor, drawFont, view.size.cx - volTextSize.cx - 10, dTop + avgHeight / 2 - volTextSize.cy / 2);
                }
                dTop += avgHeight;
            }
            paint.drawLine(view.borderColor, 1, [], 0, dTop, view.size.cx, dTop);
            paint.drawText("现价", "rgb(175,196,228)", drawFont, 5, dTop + 10);
            paint.drawText("幅度", "rgb(175,196,228)", drawFont, 5, dTop + 35);
            paint.drawText("总额", "rgb(175,196,228)", drawFont, 5, dTop + 60);
            paint.drawText("总量", "rgb(175,196,228)", drawFont, 5, dTop + 85);
            paint.drawText("开盘", "rgb(175,196,228)", drawFont, 110, dTop + 10);
            paint.drawText("振幅", "rgb(175,196,228)", drawFont, 110, dTop + 35);
            paint.drawText("最高", "rgb(175,196,228)", drawFont, 110, dTop + 60);
            paint.drawText("最低", "rgb(175,196,228)", drawFont, 110, dTop + 85);
            if (dataStrs.length > 10) {
                let close = parseFloat(dataStrs[2]);
                let high = parseFloat(dataStrs[3]);
                let low = parseFloat(dataStrs[4]);
                let open = parseFloat(dataStrs[5]);
                let volume = parseFloat(dataStrs[6]);
                let amount = parseFloat(dataStrs[7]);
                let diff = 0;
                if(lastClose > 0){
                    diff = 100 * (close - lastClose) / lastClose;
                }
                
                let diff2 = 0;
                if(lastClose > 0){
                    diff2 = 100 * (high - lastClose) / lastClose - 100 * (low - lastClose) / lastClose;
                }
                paint.drawText(close.toFixed(2), getPriceColor(close, lastClose), drawFont, 40, dTop + 10);
                paint.drawText(diff.toFixed(2) + "%", getPriceColor(close, lastClose), drawFont, 40, dTop + 35);
                paint.drawText((amount / 10000).toFixed(0), textColor, drawFont, 40, dTop + 60);
                paint.drawText((volume / 10000).toFixed(0), textColor, drawFont, 40, dTop + 85);

                paint.drawText(open.toFixed(2), getPriceColor(open, lastClose), drawFont, 150, dTop + 10);
                paint.drawText(diff2.toFixed(2) + "%", getPriceColor(close, lastClose), drawFont, 150, dTop + 35);
                paint.drawText(high.toFixed(2), getPriceColor(high, lastClose), drawFont, 150, dTop + 60);
                paint.drawText(low.toFixed(2), getPriceColor(low, lastClose), drawFont, 150, dTop + 85);
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateViewDefault(gPaint.views);
            } catch (err) {
                
            }
            invalidate(gPaint);
        };


        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        /*
        * 创建列
        * grid:表格
        */
        let createGridCell = function (grid) {
            let gridCell = new FCGridCell();
            if (grid.paint.defaultUIStyle == "dark") {
                gridCell.backColor = "none";
                gridCell.borderColor = "none";
                gridCell.textColor = "rgb(175,196,228)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridCell.backColor = "none";
                gridCell.borderColor = "none";
                gridCell.textColor = "rgb(0,0,0)";
            }
            gridCell.font = "Default,13";
            return gridCell;
        };

        /*
        *获取价格颜色
        */
        let getPriceColor = function(price, comparePrice){
            if (price != 0)
            {
                if (price > comparePrice)
                {
                    return "rgb(255,82,82)";
                }
                else if (price < comparePrice)
                {
                    return "rgb(46,255,50)";
                }
            }
            return "rgb(190,190,235)";
        };

        /*
        * 根据名称查找视图
        * name:名称
        * views:视图集合
        */
        let findViewsByType = function (findType, views, refViews) {
            let size = views.length;
            for (let i = 0; i < size; i++) {
                let view = views[i];
                if (view.viewType == findType) {
                    refViews.push(view);
                } else {
                    if (view.views) {
                        findViewsByType(findType, view.views, refViews);
                    }
                }
            }
        };
       
        /*
        * 黑色风格
        */
        let toBlackChart = function (chart, index) {
            chart.paint.defaultUIStyle = "dark";
            chart.backColor = "rgb(0,0,0)";
            chart.borderColor = "none";
            chart.textColor = "rgb(175,196,228)";
            chart.scaleColor = "rgb(75,75,75)";
            chart.crossTipColor = "rgb(50,50,50)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgb(50,50,50)";
            if(index > 0){
                chart.upColor = "rgb(186,56,18)";
                chart.downColor = "rgb(31,182,177)";
            }else{
                chart.upColor = "rgb(255,82,82)";
                chart.downColor = "rgb(46,255,50)";
            }
            chart.barStyle = "rect2";
            chart.candleStyle = "rect2";
            chart.trendColor = "rgb(255,255,255)";
            chart.hScaleTextColor = "rgb(194,151,18)";
            chart.vScaleTextColor = "rgb(194,151,18)";
        };

        /*
        * 点击单元格事件
        * grid 表格
        * row 行
        * gridColumn 列
        * cell 单元格
        * firstTouch:是否第一次触摸
        * secondTouch:是否第二次触摸
        * firstPoint:第一次触摸的坐标
        * secondPoint:第二次触摸的坐标
        */
        gPaint.onClickGridCell = function (grid, row, gridColumn, cell, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            let code = row.cells[1].value;
            let name = row.cells[2].value;
            for(let i = 0; i < findMyCharts.length && i < 3; i++){
                let myChart = findMyCharts[i];
                let chart = charts[i];
                chart.text = code + " " + name;
                queryHistoryData(myChart, chart, code);
            }
            queryNewData(code);
            invalidate(grid.paint);
        };

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
            if(view.viewName && view.viewName.indexOf("cycle,") == 0){
                let strs = view.viewName.split(",");
                let index = parseInt(strs[1]);
                let cycleInt = parseInt(strs[2]);
                findMyCharts[index].exAttributes.set("cycle", cycleInt);
                queryHistoryData(findMyCharts[index], charts[index], charts[index].text.split(" ")[0])
            }
        };

        /*
        * 请求报价数据
        */
        let queryPrice = function(codes){
            let url = "http://110.42.188.197:9968/quote?func=price&count=500&codes=" + codes;
            let xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", url, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    let result = xmlhttp.responseText;
                    let strs = result.split("\r\n");
                    for(let i = 0; i < strs.length; i++){
                        let subStrs = strs[i].split(",");
                        if(subStrs.length >= 15){
                            let row = new FCGridRow();
                            gridStocks.rows.push(row);
                            let cell1 = createGridCell(gridStocks);
                            cell1.value = i;
                            row.cells.push(cell1);

                            let cell2 = createGridCell(gridStocks);
                            cell2.value = subStrs[0];
                            cell2.textColor = "rgb(194,151,18)";
                            row.cells.push(cell2);

                            let cell3 = createGridCell(gridStocks);
                            cell3.value = subStrs[1];
                            row.cells.push(cell3);

                            let close = parseFloat(subStrs[2]);
                            let high = parseFloat(subStrs[3]);
                            let low =  parseFloat(subStrs[4]);
                            let lastClose = parseFloat(subStrs[8]);
                            let cell4 = createGridCell(gridStocks);
                            cell4.value = close.toFixed(2);
                            cell4.textColor = getPriceColor(close, lastClose);
                            row.cells.push(cell4);

                            let diff = 0;
                            if(lastClose > 0){
                                diff = 100 * (close - lastClose) / lastClose;
                            }
                            let cell5 = createGridCell(gridStocks);
                            cell5.value = diff.toFixed(2) + "%";
                            cell5.textColor = getPriceColor(diff, 0);
                            row.cells.push(cell5);

                            let cell6 = createGridCell(gridStocks);
                            cell6.value = (close - lastClose).toFixed(2);
                            cell6.textColor = getPriceColor(close, lastClose);
                            row.cells.push(cell6);

                            let volume = parseFloat(subStrs[6]);
                            let amount = parseFloat(subStrs[7]);
                            let cell7 = createGridCell(gridStocks);
                            cell7.value = (volume / 100 / 10000).toFixed(2) + "万";
                            row.cells.push(cell7);

                            let cell8 = createGridCell(gridStocks);
                            cell8.value = (amount / 100000000).toFixed(2) + "亿";
                            row.cells.push(cell8);

                            let cell9 = createGridCell(gridStocks);
                            cell9.value = parseFloat(subStrs[12]).toFixed(2);
                            row.cells.push(cell9);

                            let cell10 = createGridCell(gridStocks);
                            cell10.value = parseFloat(subStrs[11]).toFixed(2);
                            row.cells.push(cell10);

                            let diff2 = 0;
                            if(lastClose > 0){
                                diff2 = 100 * (high - lastClose) / lastClose - 100 * (low - lastClose) / lastClose;
                            }
                            let cell11 = createGridCell(gridStocks);
                            cell11.value = diff2.toFixed(2) + "%";
                            row.cells.push(cell11);

                            let cell12 = createGridCell(gridStocks);
                            cell12.value = parseFloat(subStrs[13]).toFixed(2);
                            row.cells.push(cell12);

                            let marketValue = parseFloat(subStrs[9]) * close;
                            let cell13 = createGridCell(gridStocks);
                            cell13.value = (marketValue / 100000000).toFixed(2) + "亿";
                            row.cells.push(cell13);

                            let flowValue = parseFloat(subStrs[10]) * close;
                            let cell14 = createGridCell(gridStocks);
                            cell14.value = (flowValue / 100000000).toFixed(2) + "亿";
                            row.cells.push(cell14);

                            let cell15 = createGridCell(gridStocks);
                            cell15.value = "";
                            row.cells.push(cell15);

                            let upperLimit = parseFloat(subStrs[14]);
                            let lowerLimit = parseFloat(subStrs[15]);
                            let cell16 = createGridCell(gridStocks);
                            cell16.value = upperLimit.toFixed(2);
                            cell16.textColor = getPriceColor(1, 0);
                            row.cells.push(cell16);

                            let cell17 = createGridCell(gridStocks);
                            cell17.value = lowerLimit.toFixed(2);
                            cell17.textColor = getPriceColor(0, 1);
                            row.cells.push(cell17);

                            let cell18 = createGridCell(gridStocks);
                            cell18.value = "";
                            row.cells.push(cell18);

                            let cell19 = createGridCell(gridStocks);
                            cell19.value = "";
                            row.cells.push(cell19);

                            let cell20 = createGridCell(gridStocks);
                            cell20.value = "";
                            row.cells.push(cell20);

                            let cell21 = createGridCell(gridStocks);
                            cell21.value = "";
                            row.cells.push(cell21);

                            let cell22 = createGridCell(gridStocks);
                            cell22.value = "";
                            row.cells.push(cell22);
                        }
                    }
                    invalidateView(gridStocks);
                }
            }
            xmlhttp.send(null);
        };

        /*
        * 请求最新数据
        */
        let queryNewData = function(code){
            let url = "http://110.42.188.197:9968/quote?func=getnewdata&codes=" + code;
            let xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", url, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    let result = xmlhttp.responseText;
                    latestDataStr = result;
                    invalidate(gPaint);
                }
            }
            xmlhttp.send(null);
        };

        /*
        * 请求历史数据
        */
        let queryHistoryData = function (mychart, chart, code) {
            let strCycle = mychart.exAttributes.get("cycle");
            let intCycle = parseInt(strCycle);
            let url = "http://110.42.188.197:9968/quote?func=getkline&code=" + code +  "&cycle=" + strCycle + "&count=500";
            if(intCycle == 0){
                url = "http://110.42.188.197:9968/quote?func=getkline&code=" + code +  "&cycle=0&count=240";
            }
            let xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", url, true);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    let result = xmlhttp.responseText;
                    let strs = result.split("\r\n");
                    let dataList = new Array();
                    chart.firstOpen = 0;
                    if(intCycle == 0){
                        let fStrs = strs[0].split(" ");
                        if(fStrs.length >= 3){
                            chart.firstOpen = parseFloat(fStrs[2]);
                        }
                    }
                    for(let i = 2; i < strs.length; i++){
                        let subStrs = strs[i].split(",");
                        if(subStrs.length >= 7){
                            let data = new SecurityData();
                            if(intCycle < 1440){
                                let date = new Date(subStrs[0] + " " + subStrs[1].substring(0, 2) + ":" + subStrs[1].substring(2, 4) + ":00");
                                data.open = parseFloat(subStrs[2]);
                                data.high = parseFloat(subStrs[3]);
                                data.low = parseFloat(subStrs[4]);
                                data.close = parseFloat(subStrs[5]);
                                data.volume = parseFloat(subStrs[6]);
                                data.date = date.getTime();
                                if(intCycle == 0 && (data.volume > 0 || dataList.length == 0)){
                                    chart.lastValidIndex = dataList.length;
                                    if(chart.firstOpen == 0){
                                        chart.firstOpen = data.close;
                                    }
                                }
                            }else{
                                let date = new Date(subStrs[0]);
                                data.open = parseFloat(subStrs[1]);
                                data.high = parseFloat(subStrs[2]);
                                data.low = parseFloat(subStrs[3]);
                                data.close = parseFloat(subStrs[4]);
                                data.volume = parseFloat(subStrs[5]);
                                data.date = date.getTime();
                            }
                            dataList.push(data);
                        }
                    }
                    if(intCycle == 0){
                        chart.autoFillHScale = true;
                        chart.cycle = "trend";
                    }else if(intCycle < 1440){
                        chart.cycle = "minute";
                    }else{
                        chart.cycle = "day";
                    }
                    chart.datas = dataList;
                    let maxVisibleRecord = getChartMaxVisibleCount(chart, chart.hScalePixel, getChartWorkAreaWidth(chart));
                    chart.lastVisibleIndex = chart.datas.length - 1;
                    if (maxVisibleRecord > chart.datas.length) {
                        chart.firstVisibleIndex = 0;
                    } else {
                        chart.firstVisibleIndex = chart.lastVisibleIndex - maxVisibleRecord + 1;
                    }
                    resetChartVisibleRecord(chart);
                    checkChartLastVisibleIndex(chart);
                    calcChartIndicator(chart);
                    invalidateView(chart);
                }
            }
            xmlhttp.send(null);
        };

        //解析加载XML
        let xml = `<?xml version="1.0" encoding="utf-8" ?>
        <html xmlns="facecat">
        <body>
            <div bordercolor="none" name="divInner" dock="fill">
                <div type="tab" dock="fill" selectedindex="0" backcolor="none" bordercolor="none"
                name="tabFunc">
                    <div type="tabpage" text="主界面" name="divMain" backcolor="none">
                    <div type="splitlayout" layoutstyle="lefttoright" bordercolor="none" dock="fill"
                            size="650,510" candragsplitter="true" splitterposition="650,1" name="divCodingRight2">
                            <table name="gridStocks" headerheight="30" dock="fill"
                                gridlinecolor="none" bordercolor="none" showvscrollbar="true" showhscrollbar="true"
                                allowpreviewsevent="true" allowdragscroll="true">
                                <tr>
                                    <th name="colP0" text="序" width="40" allowdrag="true" allowresize="true"/>
                                    <th name="colP1" text="代码" width="70" allowdrag="true" allowresize="true"/>
                                    <th name="colP2" text="名称" width="70" allowdrag="true" allowresize="true" />
                                    <th name="colP3" text="现价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP4" text="涨幅" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP5" text="涨跌" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP9" text="总量" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP10" text="总额" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP11" text="量比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP12" text="PE动" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP13" text="振幅" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP14" text="换手率" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP15" text="总市值" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP16" text="流值" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP17" text="行业分类板块" width="80" allowdrag="true" allowresize="true" cellalign="center"/>
                                    <th name="colP18" text="涨停价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP19" text="跌停价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP20" text="金比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP21" text="涨跌比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP22" text="涨速" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP23" text="净资产收益率" width="100" allowdrag="true" allowresize="true" cellalign="right"/>
                                    <th name="colP24" text="自设指标" width="80" allowdrag="true" allowresize="true" cellalign="right"/>
                                </tr>
                            </table>
                            <div type="splitlayout" layoutstyle="toptobottom" bordercolor="none" dock="fill"
                                size="400,400" candragsplitter="true" splitterposition="380,1">
                                <div type="splitlayout" layoutstyle="righttoleft" bordercolor="none" dock="fill"
                                    size="400,400" candragsplitter="true" splitterposition="200,1">
                                    <div type="custom" cid="latestdiv" name="divLatest"/>
                                    <div type="custom" cid="mychart" name="mainChart1" cycle="0" candledivpercent="0.7"
                                            voldivpercent="0.3" backcolor="none" bordercolor="none"/>
                                </div>
                                <div type="splitlayout" layoutstyle="lefttoright" bordercolor="none" dock="fill"
                                    size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
                                    <div type="custom" cid="mychart" name="mainChart2" cycle="5" candledivpercent="0.7"
                                            voldivpercent="0.3" backcolor="none" bordercolor="none"/>
                                    <div type="custom" cid="mychart" name="mainChart3" cycle="1440" candledivpercent="0.7"
                                            voldivpercent="0.3" backcolor="none" bordercolor="none"/>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div type="tabpage" text="多K线" name="divMulti" backcolor="none">
                            <div type="splitlayout" layoutstyle="lefttoright" backcolor="none" bordercolor="none"
                                dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="133,1">
                                <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                    dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
                                    <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                        dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
                                        <div type="custom" cid="mychart" name="chart1" cycle="1" nativerefresh="true" candledivpercent="1"
                                            voldivpercent="0" backcolor="none" bordercolor="none"/>
                                        <div type="custom" cid="mychart" name="chart2" cycle="5" nativerefresh="true" candledivpercent="1"
                                            voldivpercent="0" backcolor="none" bordercolor="none"/>
                                    </div>
                                    <div type="custom" cid="mychart" name="chart3" cycle="10" nativerefresh="true" candledivpercent="1"
                                        voldivpercent="0" backcolor="none" bordercolor="none"/>
                                </div>
                                <div type="splitlayout" layoutstyle="lefttoright" backcolor="none" bordercolor="none"
                                    dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
                                    <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                        dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
                                        <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                            dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
                                            <div type="custom" cid="mychart" name="chart4" cycle="15" nativerefresh="true" candledivpercent="1"
                                                voldivpercent="0" backcolor="none" bordercolor="none"/>
                                            <div type="custom" cid="mychart" name="chart5" cycle="20" nativerefresh="true" candledivpercent="1"
                                                voldivpercent="0" backcolor="none" bordercolor="none"/>
                                        </div>
                                        <div type="custom" cid="mychart" name="chart6" cycle="30" nativerefresh="true" candledivpercent="1"
                                            voldivpercent="0" backcolor="none" bordercolor="none"/>
                                    </div>
                                    <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                        dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
                                        <div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
                                            dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
                                            <div type="custom" cid="mychart" name="chart7" cycle="1440" nativerefresh="true"
                                                candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
                                            <div type="custom" cid="mychart" name="chart8" cycle="10080" nativerefresh="true"
                                                candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
                                        </div>
                                        <div type="custom" cid="mychart" name="chart9" cycle="43200" nativerefresh="true"
                                            candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </body>
        </html>`;
        renderFaceCat(gPaint, xml);
        let gridStocks = findViewByName("gridStocks", gPaint.views);
        for(let i = 3; i < gridStocks.columns.length; i++){
            gridStocks.columns[i].cellAlign = "right";
        }
        gridStocks.selectedRowColor = "rgb(75,75,75)";
        gridStocks.alternateRowColor = "rgb(25,25,25)";
        queryPrice("all");
        let findMyCharts = new Array();
        let charts = new Array();
        let strCode = "600000.SH";
        let strName = "浦发银行";
        findViewsByType("mychart", gPaint.views, findMyCharts);
        for(let i = 0; i < findMyCharts.length; i++){
            let myChart = findMyCharts[i];
            let splitDiv = new FCSplitLayoutDiv();
            splitDiv.layoutStyle = "toptobottom";
            splitDiv.size = new FCSize(400, 400);
            splitDiv.backColor = "none";
            splitDiv.borderColor = "none";
            splitDiv.dock = "fill";
            addViewToParent(splitDiv, myChart);

            let topDiv = new FCLayoutDiv();
            topDiv.backColor = "none";
            topDiv.borderColor = "none";
            topDiv.layoutStyle = "lefttoright";
            topDiv.showHScrollBar = false;
            addViewToParent(topDiv, splitDiv);

            let bottomDiv = new FCDiv();
            bottomDiv.backColor = "none";
            bottomDiv.borderColor = "none";
            addViewToParent(bottomDiv, splitDiv);

            splitDiv.firstView = topDiv;
            splitDiv.secondView = bottomDiv;

            let splitter = new FCView();
            splitter.parent = splitDiv;
            if (gPaint.defaultUIStyle == "dark") {
                splitter.backColor = "rgb(75,75,75)";
            } else if (gPaint.defaultUIStyle == "light") {
                splitter.backColor = "rgb(150,150,150)";
            }
            splitter.borderColor = "none";
            splitter.paint = gPaint;
            splitDiv.views.push(splitter);
            splitDiv.splitter = splitter;
            splitter.size = new FCSize(400, 1);
            splitter.location = new FCPoint(0, 30);
            if(i == 0){
                splitter.location = new FCPoint(0, 0);
            }
            let chart = new FCChart();
            chart.leftVScaleWidth = 70;
            chart.rightVScaleWidth = 70;
            if(i > 0){
                chart.leftVScaleWidth = 0;
            }
            chart.vScaleDistance = 35;
            chart.hScalePixel = 11;
            chart.hScaleHeight = 30;
            chart.candlePaddingTop = 30;
            chart.candlePaddingBottom = 20;
            chart.volPaddingTop = 20;
            chart.volPaddingBottom = 0;
            chart.vScaleDistance = 35;
            chart.dock = "fill";
            chart.font = "Default,12";
            chart.candleDivPercent = parseFloat(myChart.exAttributes.get("candledivpercent"));
            chart.volDivPercent = parseFloat(myChart.exAttributes.get("voldivpercent"));
            chart.indDivPercent = 0;
            if (gPaint.isMobile) {
                chart.rightVScaleWidth = 0;
                chart.leftVScaleWidth = 60;
            }
            chart.text = strCode + " " + strName;
            let intCycle = parseInt(myChart.exAttributes.get("cycle"));
            if(intCycle == 0){
                chart.text += " 分时";
            }else if(intCycle < 1440){
                chart.text += " " + intCycle.toString() + "分钟";
            }else if(intCycle == 1440){
                chart.text += " 日线";
            }else if(intCycle == 10080){
                chart.text += " 周线";
            }else if(intCycle == 43200){
                chart.text += " 月线";
            }
            chart.allowDragChartDiv = true;
            charts.push(chart);
            addViewToParent(chart, bottomDiv);
            toBlackChart(chart, i);
            queryHistoryData(myChart, chart, strCode);

            let cycles = new Array();
            cycles.push("1");
            cycles.push("5");
            cycles.push("10");
            cycles.push("15");
            cycles.push("20");
            cycles.push("30");
            cycles.push("60");
            cycles.push("90");
            cycles.push("120");
            cycles.push("日");
            cycles.push("周");
            cycles.push("月");
            cycles.push("季");
            cycles.push("半");
            cycles.push("年");
            let cyclesInts = new Array();
            cyclesInts.push(1);
            cyclesInts.push(5);
            cyclesInts.push(10);
            cyclesInts.push(15);
            cyclesInts.push(20);
            cyclesInts.push(30);
            cyclesInts.push(60);
            cyclesInts.push(90);
            cyclesInts.push(120);
            cyclesInts.push(1440);
            cyclesInts.push(10080);
            cyclesInts.push(43200);
            cyclesInts.push(129600);
            cyclesInts.push(259200);
            cyclesInts.push(518400);
            for(let c = 0; c < cycles.length; c++){
                let cycleButton = new FCButton();
                cycleButton.text = cycles[c];
                cycleButton.size = new FCSize(27, 30);
                cycleButton.textColor = "rgb(200,200,200)";
                cycleButton.borderColor = "rgb(50,50,50)";
                cycleButton.backColor = "none";
                cycleButton.viewName = "cycle," + i.toString() + "," + cyclesInts[c].toString();
                addViewToParent(cycleButton, topDiv);
            }
        }
        queryNewData(strCode);
        updateViewDefault(gPaint.views);
        invalidate(gPaint);

        /**
         * 绘制横轴刻度的自定义方法
         * chart:图表
         * paint:绘图对象
         * clipRect:裁剪区域
         */
         gPaint.onPaintChartHScale = function(chart, paint, clipRect){
            if (chart.datas && chart.datas.length > 0 && chart.hScaleHeight > 0) {
                if(chart.cycle == "trend"){
                    let times = new Array();
                    if (chart.size.cx < 600)
                    {
                        times.push(10 * 60 + 30);
                        times.push(11 * 60 + 30);
                        times.push(14 * 60);
                    }
                    else
                    {
                        times.push(10 * 60);
                        times.push(10 * 60 + 30);
                        times.push(11 * 60);
                        times.push(11 * 60 + 30);
                        times.push(13 * 60 + 30);
                        times.push(14 * 60);
                        times.push(14 * 60 + 30);
                    }
                    for(let i = chart.firstVisibleIndex; i <= chart.lastVisibleIndex; i++){
                        let dateNum = chart.datas[i].date;
                        let date = new Date();
                        date.setTime(dateNum); 
                        let hour = date.getHours();
                        let minute = date.getMinutes();
                        for(let j = 0; j < times.length; j++){
                            if(times[j] == hour * 60 + minute){
                                let x = getChartX(chart, i);
                                let bBottom = chart.size.cy;
                                paint.drawLine(chart.scaleColor, 1, 0, x, bBottom - chart.hScaleHeight, x, bBottom - chart.hScaleHeight + 12);
                                paint.drawLine(chart.gridColor, 1, 0, x, 0, x, bBottom - chart.hScaleHeight);
                                let xText = dateFormat("HH:MM", date);
                                let tSize = paint.textSize(xText, "Default,12");
                                paint.drawText(xText, chart.hScaleTextColor, "Default,12", x - tSize.cx / 2, bBottom - chart.hScaleHeight / 2 - tSize.cy / 2);
                                break;
                            }
                        }
                    }
                }else if(chart.cycle == "minute"){
                    let lastYear = 0;
                    let lastDate2 = 0;
                    let dLeft = chart.leftVScaleWidth;
                    for(let i = chart.firstVisibleIndex; i <= chart.lastVisibleIndex; i++){
                        let dateNum = chart.datas[i].date;
                        let date = new Date();
                        date.setTime(dateNum); 
                        let year = date.getFullYear();
                        let xText = "";
                        if (year != lastYear)
                        {
                            xText = dateFormat("YYYY/mm/dd", date);
                        }
                        else
                        {
                            xText = dateFormat("mm/dd", date);
                        }
                        if (parseInt(lastDate2 / 86400000) != parseInt(dateNum / 86400000))
                        {
                            lastDate2 = dateNum;
                            lastYear = year;
                            let tSize = paint.textSize(xText, "Default,12");
                            let x = getChartX(chart, i);
                            let dx = x + 2;
                            if (dx > dLeft && dx + tSize.cx < chart.size.cx - chart.rightVScaleWidth - 5)
                            {
                                let bBottom = chart.size.cy;
                                paint.drawLine(chart.scaleColor, 1, 0, x, bBottom - chart.hScaleHeight, x, bBottom - chart.hScaleHeight + 12);
                                paint.drawText(xText, chart.hScaleTextColor, "Default,12", dx, bBottom - chart.hScaleHeight / 2 - tSize.cy / 2);
                                i = i + parseInt((tSize.cx + chart.hScaleTextDistance) / chart.hScalePixel) + 1;
                            }
                        }
                    }
                }
                else if(chart.cycle == "day"){
                    let drawLeft = chart.leftVScaleWidth; //左侧起画点
                    let i = chart.firstVisibleIndex; //开始索引
                    let lastYear = 0; //缓存年份，用于判断是否换年
                    let drawYearsCache = []; //实际绘制到图形上的年份文字
                    let lastTextRight = 0; //上个文字的右侧
                    let timeCache = []; //保存日期的缓存
                    let yearTextLeftCache = []; //绘制年文字的左侧位置缓存
                    let yearTextRightCache = []; //绘制年文字的右侧位置缓存
                    let textPadding = 5; //两个文字之间的最小间隔
                    //逐步递增索引，先绘制年
                    while(i <= chart.lastVisibleIndex){
                        let dateObj = new Date();
                        dateObj.setTime(chart.datas[i].date); //将时间戳转换为time，并缓存到集合中
                        timeCache.push(dateObj);
                        let year = dateObj.getFullYear(); //从结构中获取年份			
                        let x = getChartX(chart, i); //获取索引对应的位置
                        //判断是否换年，以及是否在绘图区间内
                        if (year != lastYear && x >= drawLeft && x < chart.size.cx - chart.rightVScaleWidth){
                            let month = dateObj.getMonth() + 1; //获取月的结构
                            let xText = year.toString(); //拼接要绘制的文字
                            if (month < 10){
                                xText = xText + "/0" + month.toString(); //如果小于10月要补0
                            }
                            else{
                                xText = xText + "/" + month.toString(); //大于等于10月不用补0
                            }
                            let tSize = paint.textSize(xText, chart.font); //计算要绘制文字的大小
                            paint.drawLine(chart.scaleColor, 1, 0, x, chart.size.cy - chart.hScaleHeight, x, chart.size.cy - chart.hScaleHeight + 8) //绘制刻度线
                            //判断是否和上个文字重影
                            if (x + 2 > lastTextRight + textPadding){
                                paint.drawText(xText, chart.hScaleTextColor, "Default,12", x + 2, chart.size.cy - chart.hScaleHeight + 8  - tSize.cy / 2 + 7) //绘制文字
                                yearTextLeftCache.push(x + 2); //将年文字的左侧位置缓存
                                yearTextRightCache.push(x + 2 + tSize.cx); //将年文字的右侧位置缓存
                                drawYearsCache.push(year); //缓存要绘制的年
                                lastTextRight = x + 2 + tSize.cx; //缓存上个文字的右侧位置
                            }
                            lastYear = year; //记录上次绘制的年份
                        }
                        i = i + 1;	//索引累加
                    }	
                    //绘制月份
                    for(let m = 0; m < drawYearsCache.length; m++){
                        let cacheYear = drawYearsCache[m]; //从缓存中获取年份
                        let lastMonth = 0; //缓存月份，用于判断是否换月
                        i = chart.firstVisibleIndex; //重置开始索引
                        lastTextRight = 0; //重置上个文字的右侧
                        //逐步递增索引
                        while (i <= chart.lastVisibleIndex){
                            let dateObj = timeCache[i - chart.firstVisibleIndex]; //从缓存中获取time
                            let year = dateObj.getFullYear(); //从结构中获取年份
                            //判断是否同一年	
                            if (cacheYear == year){
                                let month = dateObj.getMonth() + 1; //从结构中获取月份
                                let x = getChartX(chart, i);
                                //判断是否换月，以及是否在绘图区间内
                                if(lastMonth != month && x >= drawLeft && x < chart.size.cx - chart.rightVScaleWidth){		
                                    let xText = month.toString(); //获取绘制的月份文字
                                    let tSize = paint.textSize(xText, chart.font); //计算要绘制文字的大小
                                    //判断是否和上个文字重影
                                    if(x + 2 > lastTextRight + textPadding){
                                        if ((x + 2 > yearTextRightCache[m] + textPadding) 
                                        && ((m == drawYearsCache.length - 1) 
                                        || ((m < drawYearsCache.length - 1) 
                                        && (x + 2 + tSize.cx < yearTextLeftCache[m + 1] - textPadding)))){
                                            paint.drawLine(chart.scaleColor, 1, 0, x, chart.size.cy - chart.hScaleHeight, x, chart.size.cy - chart.hScaleHeight + 6); //绘制刻度
                                            paint.drawText(xText, chart.hScaleTextColor, "Default,12", x + 2, chart.size.cy - chart.hScaleHeight + 8  - tSize.cy / 2 + 7); //绘制文字
                                            lastTextRight = x + 2 + tSize.cx; //缓存上个文字的右侧位置
                                        }
                                    }
                                    lastMonth = month //记录上次绘制的月份
                                }
                            }
                            else if(cacheYear < year){
                                break; //超过区间，退出循环
                            }
                            i = i + 1;	//索引累加
                        }
                    }
                }
            }
        };
    </script>
</body>

</html>